<!--
  Generated template for the AddRecordPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar no-border>
    <ion-title>物种记录</ion-title>
    <ion-buttons end *ngIf="state == '1'" >
      <button ion-button color="white" (click)="commitClick()">提交</button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content>
  <ion-list>
      <ion-item >
          <ion-label>{{data.showName}}</ion-label>
          <ion-datetime disabled="{{state=='1'?'false':'true'}}" item-end style="color:darkgray;padding:0px;" displayFormat="YYYY-MM-DD" [(ngModel)]="data.date" doneText="确定"
            cancelText="取消"></ion-datetime>
        </ion-item>
    <!-- <div class="ac-line-tiny"></div> -->
    <ion-item >
        <ion-label>目的物种</ion-label>
        <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}"  type="text" placeholder="请输入物种名称"  [(ngModel)]="data.target"></ion-input>
    </ion-item>
    <div class="ac-line-tiny"></div>
    <ion-item class="titleItem" >
      <ion-icon item-start name="pin" ios="ios-pin-outline" md="ios-pin-outline" color="primary"></ion-icon>
      <ion-label item-content>{{locantionDes}}</ion-label>
      <button *ngIf="state!='0'&&locantionDes!='正在获取位置信息'"  ion-button icon-start clear item-end (click)="locationClick()">
        <ion-icon style="margin-right:0px !important" item-end  name="refresh" ios="ios-refresh-outline" md="ios-refresh-outline" color="primary"></ion-icon>
        刷新
      </button>
    </ion-item>
    <ion-item *ngIf="data.lat!=null&&data.lat.length>0" >
      <h3>{{data.address}}</h3>
      <div class="ac-line-tiny"></div>
      <p>经度：{{data.lng}} 维度:{{data.lat}} 海拔:{{data.alt}}米</p>
    
    </ion-item>
    <ion-item>
      <ion-label item-start>小地名</ion-label>
      <ion-input  (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入小地名"  [(ngModel)]="data.spot"></ion-input>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item  class="titleItem">
      <ion-icon item-start name="book" ios="ios-book-outline" md="ios-book-outline" color="primary"></ion-icon>
      <ion-label item-start>概况</ion-label>
      <button ion-button icon-start clear item-end (click)="hideOrShowBasic()">
          <ion-icon name="arrow-forward" style="margin-right:0px !important" *ngIf="!showBasic"></ion-icon>
          <ion-icon name="arrow-down" style="margin-right:0px !important" *ngIf="showBasic"></ion-icon>
      </button>
    </ion-item>
    </ion-list>

    <ion-list *ngIf="showBasic">
    <ion-item>
      <ion-label>就地保护状况</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="gender" [(ngModel)]="data.protection" [multiPickerColumns]="proofArr" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item *ngIf="data.protection=='其他'">
      <ion-label item-start>名称</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入保护状况名称"  [(ngModel)]="data.protectionName"></ion-input>
    </ion-item>
    <ion-item *ngIf="data.protection=='其他'">
      <ion-label item-start>级别</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入保护状况级别"  [(ngModel)]="data.protectionLevel"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>调查方法</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="data.method" [(ngModel)]="method" [multiPickerColumns]="methods" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>

    <ion-item>
        <div style="width:100%;margin: 0px;">
            <div class="row">
                <h3>主样方编号</h3>
                <p>{{province}}-{{county}}-{{data.target}}</p>
            </div>
        </div>
    </ion-item>

    <ion-item>
      <ion-label item-start>环境描述</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="如房前、屋后、岩石旁、河流边等"  [(ngModel)]="data.evnDesc"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>主样方面积</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="mainSampleArea" [(ngModel)]="data.mainSampleArea" [multiPickerColumns]="mainSampleAreas" doneText="确定"
        cancelText="取消"></ion-multi-picker>
        <!-- <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入主样方面积" [(ngModel)]="data.mainSampleArea"></ion-input> -->
    </ion-item>
    <ion-item *ngIf="data.mainSampleArea == '其他'" >
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入主样方面积" [(ngModel)]="mainSampleAreaOther"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label item-start style="margin: 8px 5px 8px 0px;">群落名称</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入群落名称"  [(ngModel)]="data.community"></ion-input>
      <ion-icon (click)="showNameTip()" item-end ios="ios-help-circle-outline" md="ios-help-circle-outline" color="primary"></ion-icon>
    </ion-item>

    <ion-item>
      <ion-label item-start style="margin: 8px 5px 8px 0px;">群落面积</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入群落面积,单位:m²"  [(ngModel)]="data.communityArea"></ion-input>
      <p item-end>m²</p>
      <ion-icon (click)="showAreaTip()" item-end ios="ios-help-circle-outline" md="ios-help-circle-outline" color="primary"></ion-icon>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item class="titleItem">
      <ion-icon item-start name="compass" ios="ios-compass-outline" md="ios-compass-outline" color="primary"></ion-icon>
      <ion-label item-start>方位</ion-label>
      <button ion-button icon-start clear item-end (click)="hideOrShowBearing()">
          <ion-icon name="arrow-forward" style="margin-right:0px !important" *ngIf="!showBearing"></ion-icon>
          <ion-icon name="arrow-down" style="margin-right:0px !important" *ngIf="showBearing"></ion-icon>
      </button>
    </ion-item>
    </ion-list>

    <ion-list *ngIf="showBearing">
    <ion-item>
      <ion-label>坡向</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="aspect" [(ngModel)]="data.aspect" [multiPickerColumns]="aspects" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item>
      <ion-label>坡度</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}"  item-end style="color:darkgray" id="slope" [(ngModel)]="data.slope" [multiPickerColumns]="degrees" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item *ngIf="data.slope == '其他'" >
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入坡度" [(ngModel)]="slop"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label>坡位</ion-label>
      <ion-multi-picker  disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="slopePosition" [(ngModel)]="data.slopePosition" [multiPickerColumns]="positions" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>

    </ion-list>

    <ion-list>
    <ion-item class="titleItem">
      <ion-icon item-start name="leaf" ios="ios-leaf-outline" md="ios-leaf-outline" color="primary"></ion-icon>
      <ion-label item-start>环境详情</ion-label>
      <button ion-button icon-start clear item-end (click)="hideOrShowEnvironment()">
          <ion-icon name="arrow-forward" style="margin-right:0px !important" *ngIf="!showEnvironment"></ion-icon>
          <ion-icon name="arrow-down" style="margin-right:0px !important" *ngIf="showEnvironment"></ion-icon>
      </button>
    </ion-item>
    </ion-list>

    <ion-list *ngIf="showEnvironment">
    <ion-item>
      <ion-label item-start>郁闭度</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="crownDensity" [(ngModel)]="data.crownDensity" [multiPickerColumns]="crownDensities" doneText="确定"
        cancelText="取消"></ion-multi-picker>
      <!-- <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入郁闭度"  [(ngModel)]="data.crownDensity"></ion-input> -->
    </ion-item>
    <ion-item>
      <ion-label item-start>盖度</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="number" placeholder="请输入盖度,单位%"  [(ngModel)]="data.coverage"></ion-input>
      <p item-end>%</p>
    </ion-item>
    <ion-item>
      <ion-label item-start>土壤类型</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="soilType" [(ngModel)]="data.soilType" [multiPickerColumns]="soilType" doneText="确定"
        cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item *ngIf="data.soilType=='其他'">
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入土壤类型"  [(ngModel)]="soilTypeOther"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label item-start>土壤PH值</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入土壤PH值"  [(ngModel)]="data.soilPH"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>人为干扰方式</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="interference" [(ngModel)]="data.interference" [multiPickerColumns]="interferences"
        doneText="确定" cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item *ngIf="data.interference == '其他'" >
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入认为干扰方式" [(ngModel)]="data.interferenceName" ></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>人为干扰强度</ion-label>
      <ion-multi-picker disabled="{{state=='1'?'':'true'}}" item-end style="color:darkgray" id="interferenceLevel" [(ngModel)]="data.interferenceLevel" [multiPickerColumns]="intensities"
        doneText="确定" cancelText="取消"></ion-multi-picker>
    </ion-item>
    <ion-item>
      <ion-label item-start>乔木层优势种</ion-label>
      <ion-input (keydown)="keydown($event)"  readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入乔木层优势种"  [(ngModel)]="data.treeLayerDominant"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>乔木层伴生种</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入乔木层伴生种"  [(ngModel)]="data.treeLayerAuxiliary"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>灌木层优势种</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入灌木层优势种"  [(ngModel)]="data.bushLayerDominant"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>灌木层伴生种</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入灌木层伴生种"  [(ngModel)]="data.bushLayerAuxiliary"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>草本层优势种</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入草本层优势种"  [(ngModel)]="data.herbageLayerDominant"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label item-start>草本层伴生种</ion-label>
      <ion-input (keydown)="keydown($event)" readonly="{{state=='1'?'false':'true'}}" type="text" placeholder="请输入草本层伴生种"  [(ngModel)]="data.herbageLayerAuxiliary"></ion-input>
    </ion-item>

    <ion-item (click)="addKnowPeople()">
      <h2>知情者</h2>
      <ion-icon name="ios-arrow-forward" style="color:#F2F2F2" item-end></ion-icon>
    </ion-item>
    </ion-list>

    <ion-list>
    <ion-item class="titleItem">
      <ion-icon item-start name="flower" ios="ios-flower-outline" md="ios-flower-outline" color="primary"></ion-icon>
      <ion-label item-start>物种详情</ion-label>
      <button ion-button icon-start clear item-end (click)="hideOrShowSpecies()">
          <ion-icon name="arrow-forward" style="margin-right:0px !important" *ngIf="!showSpecies"></ion-icon>
          <ion-icon name="arrow-down" style="margin-right:0px !important" *ngIf="showSpecies"></ion-icon>
      </button>
    </ion-item>
    </ion-list>

    <ion-list *ngIf="showSpecies">
    <ion-item (click)="photoClik()">
      <h2>照片详情</h2>
      <ion-icon name="ios-arrow-forward" style="color:#F2F2F2" item-end></ion-icon>
    </ion-item>
    <ion-item (click)="gotoPlantDetail()">
      <h2>目的物种详情</h2>
      <ion-icon name="ios-arrow-forward" style="color:#F2F2F2" item-end></ion-icon>
    </ion-item>
  </ion-list>
  <ion-list><div class="ty-line1"></div></ion-list>
</ion-content>
<ion-footer *ngIf="isShowApplying">
  <div class="bottom-apply">
    <p padding no-margin>审核中</p>
  </div>
</ion-footer>